<template>
  <!-- 弹窗图片 -->
  <!-- 添加的图片 -->
  <div v-if="visible">
    <div class="dialog-title-yy-information">
      <img src="../assets/img/module2/content.png" alt="弹窗图片" />
      <img src="../assets/img/module2/snailtitleicon.png" style="position: absolute; top: -10%; left: 5%" />
      <span class="dialog-title-text-yy-information">方案内容</span>
    </div>

    <button @click="closeDialog" class="botton-shut-icon-yy-information"></button>

    <div class="dialog-container-yy-information  table1">
      <div class="top-section-yy-pr-information">
        <!-- 进度条显示 -->
        <!-- 小圆点 -->
        <div class="jindudian-green-yy-pr-information" style=" left:6% "></div>
        <div
          v-bind:class="{ 'jindudian-green-yy-pr-information': selectedDetails.approvalStatus != 0, 'jindudian-white-yy-pr-information': selectedDetails.approvalStatus === 0 }"
          style=" left:34%"></div>

        <div
          v-bind:class="{ 'jindudian-green-yy-pr-information': selectedDetails.approvalStatus === 2 || selectedDetails.approvalStatus === 3, 'jindudian-white-yy-pr-information': selectedDetails.approvalStatus === 0 || selectedDetails.approvalStatus === 1 }"
          style=" left:62% "></div>

        <div
          v-bind:class="{ 'jindudian-green-yy-pr-information': selectedDetails.approvalStatus === 3, 'jindudian-white-yy-pr-information': selectedDetails.approvalStatus != 3 }"
          style=" left:90% "></div>

        <!-- 进度条 -->
        <div class="jindutiao-white-yy-pr-information" style="left:6%"></div>

        <div v-if="selectedDetails.approvalStatus != 0" class="jindutiao-green-yy-pr-information" style="left:6%"></div>

        <div v-if="selectedDetails.approvalStatus == 2 || selectedDetails.approvalStatus == 3"
          class="jindutiao-green-yy-pr-information" style="left:34%"></div>

        <div v-if="selectedDetails.approvalStatus == 3" class="jindutiao-green-yy-pr-information" style="left:62%">
        </div>



        <!-- 文字部分 -->
        <span class="jindutiao-text-green-yy-pr-information" style=" left: 3% ">未提交</span>
        <span
          v-bind:class="{ 'jindutiao-text-green-yy-pr-information': selectedDetails.approvalStatus != 0, 'jindutiao-text-white-yy-pr-information': selectedDetails.approvalStatus === 0 }"
          style=" left: 32% ">已提交</span>
        <span
          v-bind:class="{ 'jindutiao-text-green-yy-pr-information': selectedDetails.approvalStatus === 2 || selectedDetails.approvalStatus === 3, 'jindutiao-text-white-yy-pr-information': selectedDetails.approvalStatus === 0 || selectedDetails.approvalStatus === 1 }"
          style=" left: 60% ">审核中</span>
        <span
          v-bind:class="{ 'jindutiao-text-green-yy-pr-information': selectedDetails.approvalStatus === 3, 'jindutiao-text-white-yy-pr-information': selectedDetails.approvalStatus != 3 }"
          style=" left: 86% ">审核完成</span>
      </div>


      <div class="bottom-section-yy-information">
        <!-- 方案名称 -->
        <div style="margin-bottom: 3px; display: flex; align-items: center">
          <p class="up-content-text-yy-information" style="color: rgba(135, 183, 218, 1)">
            方案名称
          </p>
          <div class="info-box-yy-information">
            <span class="info-box-text-yy-information">{{ selectedDetails.programName }}</span>
          </div>
        </div>
        <!-- 创建时间 -->
        <div style="margin-bottom: 3px; display: flex; align-items: center">
          <p class="up-content-text-yy-information" style="color: rgba(135, 183, 218, 1)">
            创建时间
          </p>
          <div class="info-box-yy-information">
            <span class="info-box-text-yy-information">{{ selectedDetails.applicationAcceptanceTime }}</span>
          </div>
        </div>
        <!-- 用户需求 ID -->
        <div style="margin-bottom: 3px; display: flex; align-items: center">
          <p class="up-content-text-yy-information" style="color: rgba(135, 183, 218, 1)">
            用户需求 ID
          </p>
          <div class="info-box-yy-information">
            <span class="info-box-text-yy-information">{{ selectedDetails.id }}</span>
          </div>
        </div>

        <!-- 标题内容 -->
        <div class="select-section-title-yy-pr-information">
          <div class="select-section-titleimg-yy-pr-information"> </div>
          <span class="select-section-titletext-yy-pr-information">空域使用需求信息</span>
        </div>

        <!-- 下拉框 -->
        <div class="select-section-yy-pr-information">
          <!-- 起降场信息 -->
          <div style="margin-bottom: 3px; display: flex; align-items: center">
            <p class="select-content-text-yy-information" style="color: rgba(135, 183, 218, 1)">
              起降场
            </p>
            <select class="select-info-box-yy-information" v-model="selectedAirport"
              @change="handleSelectChange('main1', selectedAirport)">
              <option disabled hidden value="default" class="select-info-box-yy-information-item">请选择</option>
              <option v-for="(row, index) in selectedDetails.takeoffLandInfo" :key="index" :value="index"
                class="select-info-box-yy-information-item">
                {{ row.name }}
              </option>
            </select>
          </div>

          <div v-if="selectedAirport !== 'default'" class='select-detail-box-yy-information'
            style="margin-bottom: 3px; margin-left:27.2%;padding-bottom: 18px">
            <div
              style="width:100%;height:40px;top:0px;left:0px;position:relative; display: flex; justify-content: space-around;">
              <div v-bind:class="{
                'xuanzedian-blue-yy-pr-information': selectedDetails.takeoffLandInfo[Number(selectedAirport)].type === 0 || selectedDetails.takeoffLandInfo[Number(selectedAirport)].type === 2,
                'xuanzedian-white-yy-pr-information': selectedDetails.takeoffLandInfo[Number(selectedAirport)].type === 1
              }" style="top:18px"></div>
              <div class="font-yy-detail-img-pr-information" style=" position:relative;top:18px;left:-18px"> 起飞 </div>
              <div v-bind:class="{
                'xuanzedian-blue-yy-pr-information': selectedDetails.takeoffLandInfo[Number(selectedAirport)].type === 1 || selectedDetails.takeoffLandInfo[Number(selectedAirport)].type === 2,
                'xuanzedian-white-yy-pr-information': selectedDetails.takeoffLandInfo[Number(selectedAirport)].type === 0
              }" style=" top:18px"></div>

              <div class="font-yy-detail-img-pr-information" style=" position:relative;top:18px; left:-18px"> 降落 </div>
            </div>
            <div style="position:relative;display: block;margin-top:12px;margin-left: 9%">
              <span class="font-yy-detail-pr-information" style="position: relative;color: rgba(135, 183, 218, 1)">
                机场类型：
              </span>
              <span class="font-yy-detail-pr-information">
                <!-- {{ selectedDetails.takeoffLandInfo[Number(selectedAirport)].landingZoneType }} -->
                {{ airportSizeText }}
              </span>
            </div>

            <div style="position:relative;display: block;margin-top:14px;margin-left: 9%">
              <span class="font-yy-detail-pr-information" style="position: relative;color: rgba(135, 183, 218, 1)">
                经度信息：
              </span>
              <span class="font-yy-detail-pr-information">
                {{ formatCoordinate(selectedDetails.takeoffLandInfo[Number(selectedAirport)].longitude) }}</span>
            </div>

            <div style="position:relative;display: block;margin-top:14px;margin-left: 9%">
              <span class="font-yy-detail-pr-information" style="position: relative;color: rgba(135, 183, 218, 1)">
                纬度信息：
              </span>
              <span class="font-yy-detail-pr-information">
                {{ formatCoordinate(selectedDetails.takeoffLandInfo[Number(selectedAirport)].latitude) }}</span>
            </div>
          </div>

          <!-- 航路信息 -->
          <div style="margin-bottom: 3px; display: flex; align-items: center">
            <p class="select-content-text-yy-information" style="color: rgba(135, 183, 218, 1)">
              航 路
            </p>
            <select class="select-info-box-yy-information" v-model="selectedAirline"
              @change="handleSelectChange('main2', selectedAirline)">
              <option disabled hidden value="default" class="select-info-box-yy-information-item">请选择</option>
              <option v-for="(row, index) in selectedDetails.airlineInfo" :key="index" :value="index"
                class="select-info-box-yy-information-item">
                {{ row.name }}
              </option>
            </select>
          </div>

          <div v-if="selectedAirline != 'default'" class='select-detail-box-yy-information'
            style="margin-bottom: 3px; margin-left:27.2%;padding-bottom: 18px;padding-top:6px;">


            <div style="position:relative;display: block;margin-top:14px;">
              <span class="font-yy-detail-pr-information"
                style="position: relative;margin-left: 9%;color: rgba(135, 183, 218, 1)">
                航路类型：
              </span>
              <span class="font-yy-detail-pr-information">
                <!-- {{ selectedDetails.airlineInfo[Number(selectedAirline)].routeType }} -->
                {{ airlineTypeText }}
              </span>
            </div>

            <div style="position:relative;display: block;margin-top:10px;margin-left: 9%;">
              <span class="font-yy-detail-pr-information" style="position: relative;color: rgba(135, 183, 218, 1)">
                坐标信息:
              </span>
            </div>

            <div style="position:relative;display: block;margin-top:8px;margin-left: 9%;">
              <span class="font-yy-detail-pr-information" style="position: relative;">
                <!-- {{ selectedDetails.airlineInfo[Number(selectedAirline)].coordinateInformationPoints }} -->
                {{ allCoordinateLabels }}
              </span>
            </div>

            <div style="position:relative;display:block;margin-top:10px;margin-left: 9%">
              <span class="font-yy-detail-pr-information" style="position: relative;color: rgba(135, 183, 218, 1)">
                可用高度层信息：（m）
              </span>
            </div>
            <div style="position:relative;display: block;margin-top:8px;margin-left: 9%;">
              <span class="font-yy-detail-pr-information" style="position: relative;">
                {{ selectedDetails.airlineInfo[Number(selectedAirline)].flightLevel }}
              </span>
            </div>
          </div>


          <!-- 作业区域信息 -->
          <div style="margin-bottom: 3px; display: flex; align-items: center">
            <p class="select-content-text-yy-information" style="color: rgba(135, 183, 218, 1)">
              作业区域
            </p>
            <select class="select-info-box-yy-information" v-model="selectedRegion"
              @change="handleSelectChange('main3', selectedRegion)">
              <option disabled hidden value="default" class="select-info-box-yy-information-item">请选择</option>
              <option v-for="(row, index) in selectedDetails.workInfo" :key="index" :value="index"
                class="select-info-box-yy-information-item">
                {{ row.name }}
              </option>
            </select>
          </div>

          <div v-if="selectedRegion != 'default'" class='select-detail-box-yy-information'
            style="margin-bottom: 3px; margin-left:27.2%;padding-bottom: 18px;padding-top:6px;">

            <div style="position:relative;display: block;margin-top:14px;">
              <span class="font-yy-detail-pr-information"
                style="position: relative;margin-left: 9%;color: rgba(135, 183, 218, 1)">
                区域类型：
              </span>
              <span class="font-yy-detail-pr-information">
                <!-- {{ selectedDetails.workInfo[Number(selectedRegion)].operationAreaType }} -->
                {{ operationAreaTypeText }}
              </span>
            </div>

            <div style="position:relative;display: block;margin-top:14px;">
              <span class="font-yy-detail-pr-information"
                style="position: relative;margin-left: 9%;color: rgba(135, 183, 218, 1)">
                任务类型：
              </span>
              <span class="font-yy-detail-pr-information">
                <!-- {{ selectedDetails.workInfo[Number(selectedRegion)].type }} -->
                {{ workTypeText }}
              </span>
            </div>

            <div style="position:relative;display: block;margin-top:10px;margin-left: 9%;">
              <span class="font-yy-detail-pr-information" style="position: relative;color: rgba(135, 183, 218, 1)">
                坐标信息:
              </span>
            </div>

            <div style="position:relative;display: block;margin-top:8px;margin-left: 9%;">
              <span class="font-yy-detail-pr-information" style="position: relative;">
                <!-- {{ selectedDetails.workInfo[Number(selectedRegion)].coordinateInformationPoints }} -->
                {{ workCoordinateLabels }}
              </span>
            </div>

            <div style="position:relative;display:block;margin-top:10px;margin-left: 9%">
              <span class="font-yy-detail-pr-information" style="position: relative;color: rgba(135, 183, 218, 1)">
                高度区间：（m）
              </span>
            </div>

            <div style="position:relative;display: block;margin-top:8px;margin-left: 9%;">
              <span class="font-yy-detail-pr-information" style="position: relative;">
                <!-- {{ selectedDetails.workInfo[Number(selectedRegion)].heightIntervalTest }} -->
                {{ workHeightInterval }}
              </span>
            </div>
          </div>

          <!-- 特殊区域信息 -->
          <div style="margin-bottom: 3px; display: flex; align-items: center">
            <p class="select-content-text-yy-information" style="color: rgba(135, 183, 218, 1)">
              特殊区域
            </p>
            <select class="select-info-box-yy-information" v-model="selectedSpRegion"
              @change="handleSelectChange('main4', selectedSpRegion)">
              <option disabled hidden value="default" class="select-info-box-yy-information-item">请选择</option>
              <option v-for="(row, index) in selectedDetails.specialInfo" :key="index" :value="index"
                class="select-info-box-yy-information-item">
                {{ row.name }}
              </option>
            </select>
          </div>

          <div v-if="selectedSpRegion != 'default'" class='select-detail-box-yy-information'
            style="margin-bottom: 3px; margin-left:27.2%;padding-bottom: 18px;padding-top:6px;">

            <div style="position:relative;display: block;margin-top:14px;">
              <span class="font-yy-detail-pr-information"
                style="position: relative;margin-left: 9%;color: rgba(135, 183, 218, 1)">
                区域类型：
              </span>
              <span class="font-yy-detail-pr-information">
                <!-- {{ selectedDetails.specialInfo[Number(selectedSpRegion)].specialAirspaceType }} -->
                {{ specialAreaType }}
              </span>
            </div>

            <div style="position:relative;display: block;margin-top:10px;margin-left: 9%;">
              <span class="font-yy-detail-pr-information" style="position: relative;color: rgba(135, 183, 218, 1)">
                坐标信息:
              </span>
            </div>

            <div style="position:relative;display: block;margin-top:8px;margin-left: 9%;">
              <span class="font-yy-detail-pr-information" style="position: relative;">
                <!-- {{ selectedDetails.specialInfo[Number(selectedSpRegion)].coordinateInformationPoints }} -->
                {{ specialCoordinateLabels }}
              </span>
            </div>

            <div style="position:relative;display:block;margin-top:10px;margin-left: 9%">
              <span class="font-yy-detail-pr-information" style="position: relative;color: rgba(135, 183, 218, 1)">
                可用高度层信息：（m）
              </span>
            </div>

            <div style="position:relative;display: block;margin-top:8px;margin-left: 9%;">
              <span class="font-yy-detail-pr-information" style="position: relative;">
                <!-- {{ selectedDetails.specialInfo[Number(selectedSpRegion)].heightIntervalTest }} -->
                {{ specialHeightInterval }}
              </span>
            </div>
          </div>
        </div>


        <!-- <button class="button-test" @click="testClick()">{{ activeNames }}{{ activeNamesDetail }}</button> -->
        <button v-if="selectedDetails.approvalStatus == 0" class="submit-button-yy-information"
          @click="submitClick()">提交</button>
        <button v-if="selectedDetails.approvalStatus == 1" class="withdraw-button-yy-information"
          @click="withdrawClick()">撤销</button>
        <button v-if="selectedDetails.approvalStatus == 2" class="ban-submit-button-yy-information">提交</button>
        <button v-if="selectedDetails.approvalStatus == 3" class="ban-submit-button-yy-information">提交</button>
      </div>
    </div>
  </div>

</template>


<script>
export default {
  name: "CustomDialogModule2PlanningScheme",

  data() {
    return {
      selectedAirport: "default",
      selectedAirline: "default",
      selectedRegion: "default",
      selectedSpRegion: "default",
      activeNames: [],
      activeNamesDetail: [],
    }
  },

  props: {
    selectedDetails: {
      required: true,
    },

    visible: {
      type: Boolean,
      required: true,
    },
  },
  computed: {
    airportSizeText() {
      const sizeType = this.selectedDetails.takeoffLandInfo[Number(this.selectedAirport)].sizeType;
      switch (sizeType) {
        case 0:
          return '小型';
        case 1:
          return '中型';
        case 2:
          return '大型';
        default:
          return '未知类型'; // 处理意外情况
      }
    },
    airlineTypeText() {
      const type = this.selectedDetails.airlineInfo[Number(this.selectedAirline)].type;
      switch (type) {
        case 0:
          return '低速';
        case 1:
          return '中速';
        case 2:
          return '高速';
        default:
          return '未知类型'; // 处理意外情况
      }
    },
    allCoordinateLabels() {
      const selectedAirline = this.selectedDetails.airlineInfo[Number(this.selectedAirline)];

      if (selectedAirline && selectedAirline.shapes && selectedAirline.shapes[0] && selectedAirline.shapes[0].shapes[0] && selectedAirline.shapes[0].shapes[0].points) {
        return selectedAirline.shapes[0].shapes[0].points
          .map(point => `URL-${point.sequence}`)
          .join(', '); // 使用逗号和空格分隔标签
      }

      return '无坐标信息'; // 如果没有数据，返回提示文字
    },
    workTypeText() {
      const type = this.selectedDetails.workInfo[Number(this.selectedRegion)].type;

      switch (type) {
        case 0:
          return '即时配送';
        case 1:
          return '科技文旅';
        case 2:
          return '环境监测';
        case 3:
          return '立体交通';
        case 4:
          return '边境管控';
        default:
          return '未知类型'; // 防止出现其他类型
      }
    },
    workCoordinateLabels() {
      const selectedWorkInfo = this.selectedDetails.workInfo[Number(this.selectedRegion)];
      if (selectedWorkInfo && selectedWorkInfo.shapes && selectedWorkInfo.shapes[0] && selectedWorkInfo.shapes[0].shapes[0] && selectedWorkInfo.shapes[0].shapes[0].points) {
        return selectedWorkInfo.shapes[0].shapes[0].points
          .map(point => `P-${point.sequence}`)
          .join(', ');
      }
      return '无坐标信息';
    },
    specialCoordinateLabels() {
      const selectedSpecialInfo = this.selectedDetails.specialInfo[Number(this.selectedSpRegion)];
      if (selectedSpecialInfo && selectedSpecialInfo.shapes && selectedSpecialInfo.shapes[0] && selectedSpecialInfo.shapes[0].shapes[0] && selectedSpecialInfo.shapes[0].shapes[0].points) {
        return selectedSpecialInfo.shapes[0].shapes[0].points
          .map(point => `S-${point.sequence}`)
          .join(', ');
      }
      return '无坐标信息';
    },
    workHeightInterval() {
      const selectedRegion = Number(this.selectedRegion);
      const workInfo = this.selectedDetails?.workInfo?.[selectedRegion];

      if (workInfo?.shapes?.[0]?.shapes?.[0]) {
        const { minAltitude, maxAltitude } = workInfo.shapes[0].shapes[0];
        return `${minAltitude} - ${maxAltitude}`;
      }
      return 'N/A';  // 若数据缺失则显示N/A
    },
    specialHeightInterval() {
      const selectedSpRegion = Number(this.selectedSpRegion);
      const specialInfo = this.selectedDetails?.specialInfo?.[selectedSpRegion];
      if (specialInfo?.shapes?.[0]?.shapes?.[0]) {
        const { minAltitude, maxAltitude } = specialInfo.shapes[0].shapes[0];
        return `${minAltitude} - ${maxAltitude}`;
      }
      return 'N/A';  // 若数据缺失则显示N/A
    },
    specialAreaType() {
      const selectedSpRegion = Number(this.selectedSpRegion);
      const specialInfo = this.selectedDetails?.specialInfo?.[selectedSpRegion];
      const shapeType = specialInfo?.shapes?.[0]?.shapes?.[0]?.shapeType;

      // 使用一个映射表来定义 shapeType 的文本
      const shapeTypeText = {
        1: '圆柱体',
        2: '扇形体',
        3: '多边形柱体',
        4: '航路'
      };

      // 如果 shapeType 存在，则返回对应的文本，否则返回 '未知类型'
      return shapeTypeText[shapeType] || '未知类型';
    },
    operationAreaTypeText() {
      const selectedRegion = Number(this.selectedRegion);
      const workInfo = this.selectedDetails?.workInfo?.[selectedRegion];
      const shapeType = workInfo?.shapes?.[0]?.shapes?.[0]?.shapeType;

      // 定义 shapeType 的对应文本
      const shapeTypeText = {
        1: '圆柱体',
        2: '扇形柱体',
        3: '多边形柱体',
        4: '航路'
      };

      // 返回对应的文本或 '未知类型' 如果不存在
      return shapeTypeText[shapeType] || '未知类型';
    },

  },
  methods: {
    closeDialog() {
      this.$emit("update:visible", false); // 通知父组件关闭弹窗
    },
    refreshChange() {
      this.selectedAirport = "default"
      this.selectedAirline = "default"
      this.selectedRegion = "default"
      this.selectedSpRegion = "default"
    },
    submitClick() {
      this.$emit("submitClickTransfer");
    },
    withdrawClick() {
      this.$emit("withdrawClickTransfer");
    },
    formatCoordinate(coord) {
      const degrees = Math.floor(coord);
      const minutes = Math.floor((coord - degrees) * 60);
      const seconds = (((coord - degrees) * 60 - minutes) * 60).toFixed(1);
      return `${degrees}°${minutes}'${seconds}"`;
    },
    handleSelectChange(selected, index) {
      // 清空其他选择的值
      let type = null;
      if (selected !== 'main1') this.selectedAirport = 'default';
      if (selected !== 'main2') this.selectedAirline = 'default';
      if (selected !== 'main3') this.selectedRegion = 'default';
      if (selected !== 'main4') this.selectedSpRegion = 'default';
      this.$nextTick(() => {
        // console.log("this.selectedDetails.specialInfo[Number(this.selectedSpRegion)]",this.selectedDetails.specialInfo[Number(this.selectedSpRegion)])
        if (selected == 'main1') { type = 'circular' }
        else if (selected == 'main2') { type = 'straight' }
        else if (selected == 'main3') {
          if (this.selectedDetails.workInfo[Number(this.selectedRegion)].shapes[0].shapes[0].shapeType === 3) { type = 'polygonal' }
          else { type = 'circular' }
        }
        else if (selected == 'main4') {
          if (this.selectedDetails.specialInfo[Number(this.selectedSpRegion)].shapes[0].shapes[0].shapeType === 3) { type = 'polygonal' }
          else { type = 'circular' }
        }
        this.$emit('entity-change', selected, index, type);
        // console.log(selected);
        // console.log(index);
      });
    },



    handleChangeDetail() {
      this.$nextTick(() => {

        this.$emit('entity-change', this.activeNames, this.activeNamesDetail);
        // console.log(this.activeNames);
        // console.log(this.activeNamesDetail);
      });
      // console.log('触发点击');
      // console.log(this.activeNames);
      // console.log(this.activeNamesDetail);

    },
    testClick() {
      this.activeNames = ["main3"];
      this.activeNamesDetail = [0];

    },

    clickGis(mainid, indexid) {
      this.selectedAirport = 'default'
      this.selectedAirline = 'default'
      this.selectedRegion = 'default'
      this.selectedSpRegion = 'default'
      if (mainid == "main1") {
        this.selectedAirport = indexid
      } else if (mainid == "main2") {
        this.selectedAirline = indexid
      } else if (mainid == "main3") {
        this.selectedRegion = indexid
      } else if (mainid == "main4") {
        this.selectedSpRegion = indexid
      };
    },
  },
}
</script>





<style>
.botton-shut-icon-yy-information {
  background-image: url('../assets/img/nav/关闭.png');
  position: absolute;
  background-size: contain;
  /* 背景图片覆盖按钮大小 */
  background-repeat: no-repeat;
  background-color: transparent;
  color: transparent;
  left: 75%;
  top: 5%;
  width: 40px;
  height: 40px;
  z-index: 3;
  border: none;
  cursor: pointer;
  /* filter: brightness(0.1); */
  pointer-events: auto;

}

.dialog-title-yy-information {
  width: 62%;
  position: absolute;
  top: 5%;
  left: 5%;
  /* background-color: white; */
}

.dialog-title-text-yy-information {
  position: absolute;
  top: 5%;
  left: 23%;
  overflow-wrap: break-word;

  background-image: linear-gradient(180deg,
      rgba(200, 215, 228, 1) 0,
      rgba(255, 255, 255, 1) 100%);
  color: rgba(112, 112, 112, 1);
  font-size: 22px;
  letter-spacing: 1px;
  /* font-family: PangMenZhengDao-3; */
  font-family: 'smallTitleFont', sans-serif;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 23px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}

.dialog-container-yy-information {
  background-image: url("../assets/img/module2/bg.png");
  background-size: 100% 100%;
  /* background-color:white; */
  padding: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 80%;
  height: 88%;
  position: absolute;
  top: 10%;
  left: 5%;
  padding: 0px;
  flex-grow: 1;
  pointer-events: auto;
}




.top-section-yy-information {
  /* z-index: 10; */
  /* position:absolute; */


  margin-bottom: 5%;
  margin-top: 5%;
  left: 0%;
  height: 8%;
  top: 5%;
  /* display: block; */
  /* background-color: blue; */
}

.jindudian-green-yy-information {
  background-color: rgba(151, 223, 117, 1);
  border-radius: 50%;
  position: absolute;
  left: 108px;
  top: 16px;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(246, 246, 246, 1);
  top: 5%;
  z-index: 400;
}

.jindudian-white-yy-information {
  background-color: rgba(216, 216, 216, 1);
  border-radius: 50%;
  position: absolute;
  left: 108px;
  top: 16px;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(246, 246, 246, 1);
  top: 5%;
  z-index: 400;
}

.jindutiao-white-yy-information {
  position: absolute;
  left: 8%;
  top: 5.3%;
  width: 86%;
  height: 10px;
  background-image: url("../assets/img/module2/whiteline.png");
  background-size: 100% 100%;
  background-color: transparent;
}

.jindutiao-green-yy-information {
  position: absolute;
  top: 5.3%;
  width: 30%;
  height: 10px;
  background-image: url("../assets/img/module2/greenline.png");
  background-size: 100% 100%;
  background-color: transparent;
  z-index: 200;
}

.jindutiao-text-green-yy-information {
  overflow-wrap: break-word;
  color: rgba(151, 223, 117, 1);
  font-size: 12px;
  font-family: AlibabaPuHuiTi_2_65_Medium;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 17px;
  position: absolute;
  top: 7.5%
}

.jindutiao-text-white-yy-information {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 12px;
  font-family: AlibabaPuHuiTi_2_65_Medium;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 17px;
  position: absolute;
  top: 7.5%
}

.progress-labels-yy-information {
  position: absolute;
  color: white;
  top: 7%;
  left: 50%;
  transform: translate(-50%);
  font-size: 20px;
}

.bottom-section-yy-information {
  position: absolute;
  /* background-color: white; */
  left: 0%;
  top: 8%;
  width: 100%;
  height: 100%;
  /* margin-left: 15px;
  flex-grow: 1; */
}

.select-section-yy-information {
  background-image: url("../assets/img/module2/bg.png");
  background-size: 100% 100%;
  position: absolute;
  /* background-color:transparent; */
  left: 6%;
  top: 215px;
  width: 88%;
  height: 190px;

}



.jindudian-green-yy-pr-information {
  background-color: rgba(151, 223, 117, 1);
  border-radius: 50%;
  position: absolute;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(246, 246, 246, 1);
  top: 2.4%;
  z-index: 400;
}

.jindudian-white-yy-pr-information {
  background-color: rgba(216, 216, 216, 1);
  border-radius: 50%;
  position: absolute;
  left: 108px;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(246, 246, 246, 1);
  top: 2.4%;
  z-index: 400;
}

.jindutiao-white-yy-pr-information {
  position: absolute;
  left: 8%;
  top: 2.6%;
  width: 86%;
  height: 10px;
  background-image: url("../assets/img/module2/whiteline.png");
  background-size: 100% 100%;
  background-color: transparent;
}

.jindutiao-green-yy-pr-information {
  position: absolute;
  top: 2.6%;
  width: 30%;
  height: 10px;
  background-image: url("../assets/img/module2/greenline.png");
  background-size: 100% 100%;
  background-color: transparent;
  z-index: 200;
}

.jindutiao-text-green-yy-pr-information {
  overflow-wrap: break-word;
  color: rgba(151, 223, 117, 1);
  font-size: 12px;
  font-family: AlibabaPuHuiTi_2_65_Medium;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 17px;
  position: absolute;
  top: 4.8%
}

.jindutiao-text-white-yy-pr-information {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 12px;
  font-family: AlibabaPuHuiTi_2_65_Medium;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 17px;
  position: absolute;
  top: 4.8%
}

.dropdown-container-yy-information {
  /* background-color: white; */
  position: absolute;
  top: 25%;
  left: 0%;
  height: 75%;
  width: 100%;
}





.submit-button-yy-information {
  background-image: url('../assets/img/module2/button-tijiao.png');
  position: absolute;
  background-size: 100% 100%;
  /* 背景图片覆盖按钮大小 */

  background-repeat: no-repeat;
  background-color: transparent;
  color: transparent;
  left: 50%;
  bottom: 10%;
  height: 40px;
  width: 120px;
  border: none;
  cursor: pointer;
  color: white;
  font-size: 18px;
  text-align: center;
  transform: translate(-50%);
}

.ban-submit-button-yy-information {
  background-image: url('../assets/img/module2/button-tijiao.png');
  position: absolute;
  background-size: 100% 100%;
  /* 背景图片覆盖按钮大小 */

  background-repeat: no-repeat;
  background-color: transparent;
  color: transparent;
  left: 50%;
  bottom: 10%;
  height: 40px;
  width: 120px;
  border: none;
  cursor: not-allowed;
  filter: grayscale(100%);
  color: white;
  font-size: 18px;
  text-align: center;
  transform: translate(-50%);
}

.withdraw-button-yy-information {
  background-image: url('../assets/img/module2/button-bohui.png');
  position: absolute;
  background-size: 100% 100%;
  /* 背景图片覆盖按钮大小 */

  background-repeat: no-repeat;
  background-color: transparent;
  color: transparent;
  left: 50%;
  bottom: 10%;
  height: 40px;
  width: 120px;
  border: none;
  cursor: pointer;
  color: white;
  font-size: 18px;
  text-align: center;
  transform: translate(-50%);
}

.up-content-text-yy-information {
  background-color: transparent;
  margin-right: 3%;
  text-align: right;
  width: 27%;
  z-index: 2000;
  font-size: 14px;
}

.select-content-text-yy-information {
  background-color: transparent;
  margin-right: 0.3%;
  text-align: center;
  width: 27%;
  z-index: 2000;
  font-size: 14px;
}


.select-info-box-yy-information {
  background-image: url("../assets/img/module2/text.png");
  background-size: 100% 100%;
  background-color: transparent;
  border: none;
  padding-left: 5%;
  width: 68%;
  height: 40px;
  font-size: 14px;
  color: rgba(208, 219, 227, 1);
}

.select-info-box-yy-information-item {
  /* 不支持设置图片 */
  /* background-image:url('../assets/img/module2/table.png'); */
  background-color: black;
  background-size: 100% 100%;
  color: #ffffff;
  /* 设置文字颜色 */
}


.select-detail-box-yy-information {
  background-image: url("../assets/img/module2/text.png");
  background-size: 100% 100%;
  /* height:40px; */
  width: 68%;
  margin-right: 10px;
  /* background-color: white; */
}




.info-box-yy-information {
  position: relative;
  background-image: url("../assets/img/module2/text.png");

  background-size: cover;
  padding: 0px;
  width: 60%;
  height: 40px;
}

.info-box-text-yy-information {
  font-size: 14px;
  color: rgba(208, 219, 227, 1);
  position: absolute;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}


.info-box-yy-ps-information {
  position: relative;
  background-image: url("../assets/img/module2/text.png");
  background-size: cover;
  padding: 0px;
  width: 60%;
  height: 40px;
}

.select-yy-information {
  background-color: transparent;
  border: none;
  color: rgba(208, 219, 227, 1);
  width: 100%;
  height: 100%;
  font-size: 14px;
  padding-left: 10%;
  z-index: 3000;

}

.select-yy-information option {
  background-color: #2b2b2b;
  /* 设置下拉选项的背景颜色 */
  color: #fff;
  /* 设置下拉选项的文字颜色 */
  border: none;
}


.table1::-webkit-scrollbar {
  width: 0.125rem;
  background-color: rgba(0, 16, 29, 0.5) !important;
}

.table1::-webkit-scrollbar-thumb {
  background: #0378FF;
  border-radius: 0.625rem;
}
</style>